<template>
	<view class="login">
		<view class="top">
			<view class="title f36 text-bold">获取您的手机号</view>
			<view class="tips mt12 text-gray f26">获取手机号完善个人资料，主要用于向用户提供具有辨识度的用户中心界面</view>
		</view>
		<view class="info">
		<!-- 	<view class="item">
				<view class="label f36 mr50">头像</view>

				<view class="content">
					<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<view v-if="!userInfo.headimgUrl" class="avtar cuIcon-add"></view>
						<image
							v-else
							class="avatar cu-avatar radius avatar-login"
							:src="userInfo.headimgUrl"></image>
					</button>
					<view class="ml30 text-gary">(点击'+'获取头像)</view>
				</view>
			</view> -->
			<view class="item mt60" style="height: 100rpx">
				<view class="label f36 mr50">{{!inputFlag?'手机号':'游客编码'}}</view>
				<view class="content flex1" style="height: 100%">
					<view v-if="!inputFlag">{{userInfo.phone || '点击一键登录即可获取手机号'}}</view>
					<view v-else>{{"游客编码随机数"}}</view>
				</view>
			</view>
		</view>
		<view class="login-bth">
			<button v-if="!inputFlag" class="btn margin-tb-sm lg" :class="'bg-' + theme.backgroundColor" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
			<button v-else class="btn margin-tb-sm lg" :class="'bg-' + theme.backgroundColor" @click="inputLogin">登录</button>
			<view class="margin-tb-sm lg text-center text-red" @click="touristLogin">暂不登录</view>
			<!-- <view class="margin-tb-sm lg text-center text-red" @tap.stop="$goUrl('/pages/home/index', 3)">暂不登录</view> -->
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import __config from "config/env";
	const util = require("utils/util.js");
	import api from "utils/api";
	import validate from 'utils/validate'
	
	export default {
		props: {
			reUrl: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				theme: app.globalData.theme,
				inputFlag:false,
				userInfo: {
					phone:''
				},
			};
		},
		methods: {
			//游客登录
			touristLogin(){
				this.userInfo = uni.getStorageSync('user_info');
				const params = {openId:this.userInfo.openId}
				api.touristLogin(params).then(res => {
					uni.setStorageSync("third_session", res.data.thirdSession);
					uni.setStorageSync('user_info',res.data);
					if(res.code == 0){
						uni.reLaunch({
							url: this.reUrl ? decodeURIComponent(this.reUrl) : "/pages/home/index",
							// url: this.reUrl?decodeURIComponent(this.reUrl):'/pages/home/index'
						});
					}else{
						uni.showToast({
							title: "服务繁忙，请刷新重试",
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			getPhoneNumber(e) {
				if (e.detail.encryptedData) {
					api.loginByPhoneMa(e.detail).then((res) => {
						let userInfo = res.data;
						uni.setStorageSync("third_session", userInfo.thirdSession);
						uni.setStorageSync("user_info", userInfo);
						uni.reLaunch({
							url: this.reUrl ? decodeURIComponent(this.reUrl) : "/pages/home/index",
						});
						//登录完成跳到首页
						// api.userInfoUpdate({
						// 	id: userInfo.id,
						// }).then((res) => {
						// 	uni.showToast({
						// 		title: "操作成功",
						// 		type: "success",
						// 	});
						// 	uni.reLaunch({
						// 		url: this.reUrl ? decodeURIComponent(this.reUrl) : "/pages/home/index",
						// 	});
						// });
					});
				}
			},
			
		},
	};

</script>
<style lang="scss" scoped>
.login {
	padding: 100rpx 64rpx;
	background-color: #fff;
	min-height: calc(100vh - 94px);
	.tips {
		line-height: 1.5em;
	}
	.info {
		margin-top: 100rpx;
		.item {
			display: flex;
			align-items: center;
			.content {
				display: flex;
				align-items: center;
				.input {
					width: 100%;
					height: 100%;
					background-color: #f4f4f4;
					display: flex;
					border-radius: 50rpx;
					padding: 0 20rpx;
				}
				.avtar {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					border: 4rpx dashed #333;
				}
			}
		}
	}
}
.chooseAvatar {
	padding: 0;
	background-color: transparent;
	border: none;
}
.avatar-login {
	width: 108rpx;
	height: 108rpx;
	border-radius: 50%;
}
.login-bth {
	margin-top: 200rpx;
	.btn {
		width: 100%;
	}
}
</style>
